<template>
	<view class="card-box">
		<view class="title-category ss-flex-row ss-row-between ss-col-center">
			<view class="title">权益兑换</view>
			<view class="categorys ss-flex-row ss-row-right">
				<view class="item" :class="{'select':selectIndex==index,'unselect':selectIndex!=index}" @click="categorysClick(index)" v-for="(item,index) in categorys" :key="index">{{item.label}}</view>
			</view>
		</view>
		<view class="num ss-flex ss-col-center ss-row-between">
			<view class="num-cell" v-for="(item,index) in moneys" :key="index" :class="{'num-select':cindex==index,'num-unselect':cindex!=index}" @click="moneyClick(index)">{{item.label}}{{titles[selectIndex]}}</view>
		</view>
		
		<view class="input-view ss-flex-row ss-row-between ss-col-center">
			<view class="custom-txt">自定义金额</view>
			<view class="amount ss-flex-row">
				<input placeholder="请输入1000-100000区间的整数" placeholder-style="font-family: Source Han Sans;font-size: 22rpx;font-weight: 500;color: #DADADA;line-height:  32rpx;" type="number" v-model="state.amount" @input="changeInput"/>
			</view>
		</view>
		
		<view class="btn ss-flex-row ss-row-center ss-col-center" @click="exchange">
			<view class="more">{{state.exchange}}{{titles[selectIndex]}}</view>
			<view class="change" >立即兑换</view>
		</view>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	
	import {ref, reactive, computed ,nextTick } from 'vue';
	
	const emits = defineEmits(['exchange']);
	
	const props = defineProps({
		data:{
			type:Object,
			default:{},
		},
	})
	
	const titles = ref(['鲸豆','鲸币'])
	
	const categorys =  ref([{label:'鲸币',value:'j_coin'},{label:'鲸囍通宝',value:'jx_com_tongbao'}]);
	
	const moneys = ref([{label:'1000',value:1000},{label:'3000',value:3000},{label:'5000',value:5000}]);
	
	const state = reactive({
		amount:'1000',
		exchange:'1000',
		type:'j_coin',
	})
	
	const selectIndex = ref(0);
	
	const cindex = ref(0)
	
	function categorysClick(index){

		selectIndex.value = index;
		state.type = categorys.value[index].value;
	
	}
	
	function moneyClick(index){
		cindex.value = index;
		state.amount = moneys.value[cindex.value].value;
		state.exchange = moneys.value[cindex.value].value;
	}
	
	function exchange(){
		if(state.amount<1000||state.amount>100000){
			uni.showToast({
				title:'请输入正确的金额',
				icon:'none',
			});
			return;
		}
		
		if(state.amount % 1000 != 0){
			uni.showToast({
				title:'请输入1000的整数',
				icon:'none',
			});
			return;
		}
		
		emits('exchange',{amount:state.amount,type:state.type});
	}
	
	function changeInput(e){
		state.exchange = e.detail.value
	}
	
	
</script>

<style lang="scss" scoped>
	.card-box{
		width:calc(100%  - 22rpx - 38rpx - 20rpx - 20rpx);
		height: 430rpx;
		padding:19rpx 20rpx 30rpx 20rpx;
		
		margin-left: 22rpx;
		margin-right: 38rpx;
		
		border-radius: 20rpx;
		background: #FFFFFF;
		.title-category{
			margin-top: 19rpx;
			.title{
				font-family: Source Han Sans;
				font-size: 34rpx;
				font-weight: 550;
				line-height: 44rpx;
				letter-spacing: normal;
				color: #1F1F1F;
			}
			
		}
		.categorys{
			.item{
				height: 46rpx;
				font-family: Source Han Sans;
				font-size: 32rpx;
				font-weight: 350;
				
				letter-spacing: normal;
			}
			.item:nth-child(2){
				margin-left: 27rpx;
				margin-right: 27rpx;
			}
			.select{
				color: #2B6EDE;
				font-weight: 500;
				border-bottom: 2rpx solid #522BDE;;
				
			}
			.unselect{
				font-weight: normal;
				color: #454545;
				border:none;
			}
		}
		.num{
			margin-top: 33rpx;
			.num-cell{
				width: 182rpx;
				height: 77rpx;
				border-radius: 10rpx;
				background: rgba(255, 255, 255, 0.26);
				box-sizing: border-box;
				border: 2rpx solid #9E9E9E;
		
				display: flex;
				justify-content: center;
				align-items: center;
		 
				font-family: Source Han Sans;
				font-size: 34rpx;
				font-weight: 500;
				line-height: 49rpx;;
				letter-spacing: normal;
				
			}
			.num-select{
				
				background: rgba(43, 110, 222, 0.26);
				border: 2rpx solid #522BDE;
				color: #522BDE;
			}
			.num-unselect{
				background: rgba(255, 255, 255, 0.26);
				border: 2rpx solid #9E9E9E;
				color: #5D5D5D;
			}
		}
		.input-view{
			
			height: 76rpx;
			padding:6rpx 15rpx;
			margin-top: 47rpx;
			border-radius: 10rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			border: 2rpx solid #9E9E9E;
			.custom-txt{
				width: 150rpx;
				font-family: Source Han Sans;
				font-size: 30rpx;
				font-weight: normal;
				line-height: 43rpx;
				letter-spacing: normal;
				color: #202020;
			}
			.xi-b{
				width: 64rpx;
				font-family: Source Han Sans;
				font-size: 32rpx;
				font-weight: 500;
				line-height: 46rpx;
				letter-spacing: normal;
				color: #202020;
			}
		}
		.btn{
			width:calc(100% - 22rpx - 36rpx);
			margin-top: 32rpx;
			margin-left: 36rpx;
			margin-right: 36rpx;
			height: 80rpx;
			background: #522BDE;
			.more{

				font-family: Source Han Sans;
				font-size: 34rpx;
				font-weight: 500;
				line-height: 49rpx;
				letter-spacing: normal;
				color: #FFFFFF;
			}
			.change{
				margin-left: 10rpx;
				font-family: Source Han Sans;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 39rpx;
				letter-spacing: normal;
				color: #FFFFFF;
			}
		}
	}
</style>